<template>

  <el-descriptions
      class="margin-top"
      title="群详情"
      :column="3"
      size="large"
      border
  >
    <template #extra>
      <el-button type="primary" v-if="userInfo().id == GroupVo.groupMaster" @click="update">修改群聊</el-button>
    </template>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <user />
          </el-icon>
          头像
        </div>
      </template>
      <el-avatar shape="square" size="large" :src="url+GroupVo.avatar"/>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <iphone />
          </el-icon>
          群名
        </div>
      </template>
      {{GroupVo.name}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <location />
          </el-icon>
          群号
        </div>
      </template>
      {{GroupVo.groupNumber}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <tickets />
          </el-icon>
          成员
        </div>
      </template>
      <el-tag style="margin: 2px" size="small" v-for="item in MemberVo" :key="item.id">
        {{item.name}}
      </el-tag>
    </el-descriptions-item>
  </el-descriptions>
  <div>
    <el-scrollbar height="450px">
      <div v-for="item in MemberVo" :key="item.id" class="scrollbar-demo-item">
        <div style="flex: 1;">
          <el-avatar size="large" shape="square" :src="url+item.avatar"/>
        </div>
        <span style="flex: 1;color: #b88230" v-if="item.id == GroupVo.groupMaster">
            <el-icon><UserFilled /></el-icon>
            <span>群主</span>
        </span>
        <span style="flex: 1" v-else>
            <el-icon><UserFilled /></el-icon>
            <span>成员</span>
        </span>
        <span style="flex: 7">{{ item.name }}</span>
        <div style="flex: 4">
          <el-button type="primary" @click="toChat(item)" v-if="item.id!=userInfo().id">去私聊我</el-button>
          <el-button v-if="userInfo().id == GroupVo.groupMaster && item.id!=GroupVo.groupMaster" type="danger" @click="kick(item)">踢出该群</el-button>
        </div>
      </div>
    </el-scrollbar>
  </div>
  <div style="display: flex;">
    <el-button style="width: 400px" type="primary" @click="addMember=true">邀请好友</el-button>
    <el-button style="margin-left: auto;width: 400px" type="success">举报该群</el-button>
  </div>

  <el-dialog v-model="updateGroupShow" title="修改群聊" style="width: 500px">
    <el-form>

      <el-form-item label="修改群名：" >
        <el-input v-model="updateGroupRo.name" autocomplete="off" />
      </el-form-item >

      <el-form-item label="更换群主：" >
        <el-select v-model="updateGroupRo.groupMaster" placeholder="Select">
          <el-option
              v-for="item in MemberVo"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :disabled="item.id==GroupVo.groupMaster"
          />
        </el-select>
      </el-form-item >


      <el-form-item label="更换头像：">
        <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :on-change="uploadFile"
            :auto-upload="false"
            ref="uploadRef"
        >
          <el-avatar shape="square"  size="large"  v-if="updateGroupRo.avatar" :src="url+updateGroupRo.avatar"/>
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="addMember" title="邀请好友">
    <el-form>
      <el-form-item label="邀请好友" >
        <el-tree-select
            v-model="value"
            :data="data"
            multiple
            :render-after-expand="false"
            show-checkbox
            @click="get"
        />

      </el-form-item >

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addMemberCancel">取消</el-button>
        <el-button type="primary" @click="addMemberRe">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {useRouter} from "vue-router";
import {Ref, ref, watchEffect} from "vue";
import {addGroupUser, getGroupInfo, getGroupMember, kickOut, updateGroup} from "../../service/GroupApi";
import {error, success} from "../../utils/messageUtil";
import {FileType, userInfo} from "../../utils/constant";
import {UploadFile} from "element-plus";
import {upload} from "../../service/FileApi";
import {createSession} from "../../service/ChatApi";
import {SessionType} from "../../utils/webSocket";
import {Tree} from "element-plus/lib/components/tree-v2/src/types";
import {getFriendShowVo} from "../../service/TieApi";

const router = useRouter();

const url = ref(import.meta.env.VITE_APP_BASE_API + "/common/file/loadFileId?fileId=")

const updateGroupShow = ref(false)

const addMember = ref(false)
const value = ref()
const data = ref<Tree[]>([]);
const get = ()=>{
  getFriendShowVo().then(d=>{
    if(d.data.code==200){
      data.value = d.data.date;
    }else{
      error(d.data.message)
    }
  }).catch(()=>{
    error("网络异常")
  })
}

const addMemberCancel = ()=>{
  addMember.value = false
}

const addMemberRe = ()=>{
  addGroupUser({
    groupId: router.currentRoute.value.query.groupId,
    userIds: value.value
  }).then(d=>{
    if(d.data.code == 200){
      success("请求已发送")
      addMember.value = false
    }
  }).catch(()=>{
    error("网络错误")
  })
}

const updateGroupRo = ref({
  groupId:'',
  avatar:'',
  name:'',
  groupMaster:''
})

const kick = (data:any)=>{
  kickOut({
    groupId:GroupVo.value.groupId,
    member: data.id
  }).then(d=>{
    if(d.data.code == 200){
      MemberVo.value.splice(MemberVo.value.indexOf(data),1)
      success("踢出成功")
    }else{
      error(d.data.message)
    }
  }).catch(e => {
    error("网络异常")
  })
}

const toChat = (data:any)=>{
  createSession({
    acceptId: data.id,
    sessionType: SessionType.ALONG
  }).then(d=>{
    if(d.data.code == 200) {
      router.push({
        name: 'chat',
        query: d.data.date
      })
    }
  }).catch(e => {
    error("网络异常")
  })
}

const cancel = ()=>{
  updateGroupShow.value = false;
}

const submit = ()=>{
  updateGroup(updateGroupRo.value).then(d=>{
    if(d.data.code==200){
      if(updateGroupRo.value.groupMaster!=userInfo().id){
        router.go(0)
      }else{
        GroupVo.value.name = updateGroupRo.value.name
        GroupVo.value.avatar = updateGroupRo.value.avatar
      }
      updateGroupShow.value = false;
    }else{
      error(d.data.message)
    }
  }).catch(e => {
    error("网络异常")
  })
}

const update = ()=>{
  updateGroupRo.value.avatar = GroupVo.value.avatar;
  updateGroupRo.value.groupMaster = GroupVo.value.groupMaster;
  updateGroupRo.value.name = GroupVo.value.name;
  updateGroupRo.value.groupId = GroupVo.value.groupId
  updateGroupShow.value = true;
}

const fileRo: any = {
  multipartFiles: [],
  fileType: FileType.USER_AVATAR
}

const uploadFile = (uploadFile: UploadFile) => {
  if(uploadFile.raw?.type == "image/jpeg" || uploadFile.raw?.type == "image/png"){
    if (uploadFile.raw.size / 1024 / 1024 > 2) {
      error('头像文件不能大于 2MB!')
      return false
    }
    fileRo.multipartFiles.push(uploadFile.raw);
    upload(fileRo).then(d => {
      if (d.data.code != '200') {
        error(d.data.message)
      }else{
        updateGroupRo.value.avatar=d.data.date.fileIds[0]
      }
    }).catch(e => {
      error("网络异常")
    })
  }else{
    error("文件类型错误 只可以上传jpg和png图片")
  }
}

const GroupVo = ref({
  groupId:'',
  groupNumber:'',
  groupMaster:'',
  name:'',
  avatar:''
})

const MemberVo:Ref<any[]> = ref([])


const getGroupMemberMethod=()=>{
  getGroupMember({
    groupId: router.currentRoute.value.query.groupId
  }).then(d=>{
    if(d.data.code == 200) {
      MemberVo.value = d.data.date
    }else{
      error(d.data.message)
    }
  }).catch(()=>{
    error("网络错误")
  })
}

const getGroupInfoMethod=()=>{
  getGroupInfo({
    groupId: router.currentRoute.value.query.groupId
  }).then(d=>{
    if(d.data.code == 200) {
      GroupVo.value = d.data.date
    }else{
      error(d.data.message)
    }
  }).catch(()=>{
    error("网络错误")
  })
}

watchEffect(() => {
  if(router.currentRoute.value.name == 'groupInfo') {
    getGroupInfoMethod()
    getGroupMemberMethod()
  }
})
</script>

<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>